<template>
    <div>
        <template>
            <el-table :data="tableData" stripe style="width: 100%" border :header-cell-style="getRowClass"
                max-height="400px">
                <el-table-column :prop="listConfig[index]" :label="item" v-for="(item, index) in listConfig" :key="item.A">
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
export default {
    name: 'GenescloudUiFilePreview',
    props: {
        list: {
            type: Array,
            default: () => { }
        }
    },
    data() {
        return {
            tableData: null,
            listConfig: null,
        };
    },
    watch: {
        list: {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            immediate: true,
            deep: true,
        }
    },
    mounted() {
    },

    methods: {
        init(val) {
            this.tableData = val
            this.listConfig = Object.keys(val[0])
        },
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:#f7f8f9;font-weight: 400;color:#666;";
            }
        },

    },
};
</script>

<style lang="scss" scoped></style>

